<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏库 - GAME REVIEW HUB</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="games.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    {% load staticfiles %}
</head>
<body>
    <header class="header">
        <div class="logo">
            <h1>GAME REVIEW HUB</h1>
        </div>
        <nav class="nav">
            <a href="../templates/index.html" class="nav-item">首页</a>
            <a href="games.html" class="nav-item active">游戏</a>
            <a href="reviews.html" class="nav-item">测评</a>
            <button class="login-btn" onclick="toggleLogin()">登录</button>
        </nav>
    </header>

    <div class="games-hero">
        <div class="hero-content">
            <h1>探索游戏世界</h1>
            <div class="search-box">
                <input type="text" placeholder="搜索游戏...">
                <button><i class="fas fa-search"></i></button>
            </div>
        </div>
    </div>

    <div class="filter-section">
        <div class="filter-container">
            <div class="filter-group">
                <label>类型</label>
                <select>
                    <option>全部</option>
                    <option>动作</option>
                    <option>角色扮演</option>
                    <option>策略</option>
                    <option>射击</option>
                    <option>冒险</option>
                </select>
            </div>
            <div class="filter-group">
                <label>平台</label>
                <select>
                    <option>全部</option>
                    <option>PC</option>
                    <option>PS5</option>
                    <option>Xbox Series X</option>
                    <option>Switch</option>
                </select>
            </div>
            <div class="filter-group">
                <label>发行年份</label>
                <select>
                    <option>全部</option>
                    <option>2024</option>
                    <option>2023</option>
                    <option>2022</option>
                    <option>2021</option>
                </select>
            </div>
            <div class="filter-group">
                <label>评分</label>
                <select>
                    <option>全部</option>
                    <option>9分以上</option>
                    <option>8分以上</option>
                    <option>7分以上</option>
                </select>
            </div>
        </div>
    </div>

    <main class="games-grid">
        <!-- 游戏卡片将通过 JavaScript 动态生成 -->
    </main>

    <div class="pagination">
        <button class="prev-page"><i class="fas fa-chevron-left"></i></button>
        <div class="page-numbers">
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <span>...</span>
            <button>10</button>
        </div>
        <button class="next-page"><i class="fas fa-chevron-right"></i></button>
    </div>

    <div class="login-modal" id="loginModal">
        <!-- 复制 index.html 中的登录模态框内容 -->
    </div>
    
    <div class="register-modal" id="registerModal">
        <!-- 复制 index.html 中的注册模态框内容 -->
    </div>

    <!-- 写测评弹窗 -->
    <div class="review-modal" id="reviewModal">
        <div class="review-form">
            <div class="review-form-header">
                <h2>写测评</h2>
                <button class="close-btn" onclick="hideReviewForm()">×</button>
            </div>
            <div class="form-content">
                <div class="form-group">
                    <label>选择游戏</label>
                    <div class="select-wrapper">
                        <select id="gameSelect" required>
                            <option value="">请选择游戏</option>
                            <option value="1">艾尔登法环</option>
                            <option value="2">塞尔达传说</option>
                            <option value="3">赛博朋克2077</option>
                        </select>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>
                <div class="form-group rating-group">
                    <label>评分</label>
                    <div class="rating-input">
                        <div class="stars">
                            <i class="far fa-star" data-rating="1"></i>
                            <i class="far fa-star" data-rating="2"></i>
                            <i class="far fa-star" data-rating="3"></i>
                            <i class="far fa-star" data-rating="4"></i>
                            <i class="far fa-star" data-rating="5"></i>
                        </div>
                        <span class="rating-text">请选择评分</span>
                    </div>
                </div>
                <div class="form-group">
                    <label>测评内容</label>
                    <textarea 
                        placeholder="分享你的游戏体验（最少100字）..." 
                        required
                        minlength="100"
                        maxlength="1000"
                        rows="8"
                    ></textarea>
                    <div class="word-count">0/1000</div>
                </div>
            </div>
            <div class="form-actions">
                <button class="cancel-btn" onclick="hideReviewForm()">取消</button>
                <button class="submit-btn" onclick="submitReview()">发布测评</button>
            </div>
        </div>
    </div>

    <script src="games.js"></script>
    <script src="script.js"></script>
</body>
</html> 